<!--
  @Descripttion:用户中心-首页
  @Author：yejianbo
  @Date：2022年05月26日 12:35:40
-->
<template>
    <section class="page">
        <!-- 头部导航栏 -->
        <HeaderCom class="headerCom" />
        <div class="content-page">
            <img src="@/assets/images/user/banner.png" alt="用户中心" class="bannber" />
            <div class="content">
                <div class="content-title">用户中心</div>
                <div class="user-info">
                    <img class="left-img" v-if="!userInfo.studentPictureUrl" src="@/assets/images/user/touxiang.png"
                        alt="" />
                    <img v-if="userInfo.studentPictureUrl" class="left-img" :src="userInfo.studentPictureUrl" alt="" />

                    <div class="right">
                        <div class="row1">
                            <span class="name">{{ userInfo.nickname || "游客" }}</span>
                            <!-- @click="authClick(userStatusType.type == 'red'&&userStatusType.isShowRemark)"> -->
                            <!-- <span class="auth-status" 
              :class="userStatusType.type" 
              :style="(userStatusType.type == 'red'&&userStatusType.isShowRemark)?'cursor: pointer;':''" 
              @click="authClick(userStatusType.type == 'red')"> -->
                            <span class="auth-status" :class="userStatusType.type"
                                :style="userInfo.status != 1 ? 'cursor: pointer;' : ''"
                                @click="authClick(userInfo.status != 1)">
                                <img src="../../assets/images/user/auth.png" v-if="userStatusType.type == 'green'" />
                                <img src="../../assets/images/user/unauth.png" v-if="userStatusType.type == 'red'" />
                                <img src="../../assets/images/user/authing.png" v-if="userStatusType.type == 'orange'" />
                                {{ userStatusType.txt }}
                                <t v-if="userStatusType.isShowEmail">：{{ userInfo.email }}</t>
                                <!-- <t v-if="userStatusType.isShowRemark">：{{userInfo.remark}}</t> -->
                            </span>
                            <el-tooltip v-if="userInfo.status != 1 && userInfo.status != 2" class="item" effect="dark"
                                content="未认证，前往身份认证获取更多权限" placement="top">
                                <i class="el-icon-warning-outline" style="color: #6fc70f"
                                    @click="authClick(userInfo.status != 1)"></i>
                            </el-tooltip>
                        </div>
                        <div class="row2">
                            {{ userInfo.sex }}
                            <span class="line"></span>
                            {{ userInfo.age }}
                            <span class="line"></span>
                            {{ userInfo.liveCity }}
                            <span class="line"></span>
                            {{ userInfo.political }}
                            <span class="line"></span>
                            {{ Number(userInfo.identify) === 0 ? "在校" : "应届" }}
                        </div>
                        <div class="row3">
                            <span class="phone-icon"></span>
                            {{ userInfo.mobile }}
                        </div>
                    </div>
                </div>
                <div class="itemBox">
                    <div class="itemBox_item">
                        <div class="titles">用户信息管理</div>
                        <div class="itemRow">
                            <div class="item" v-if="userInfo.status != 1" @click="linkTo('auditId')">
                                <div class="icon">
                                    <img src="@/assets/images/user/p1.png" alt="" srcset="" />
                                </div>
                                <div class="txts">身份认证</div>
                            </div>
                            <div class="item" @click="linkTo('userInfo')">
                                <div class="icon">
                                    <img src="@/assets/images/user/p2.png" alt="" srcset="" />
                                </div>
                                <div class="txts">个人信息</div>
                            </div>
                            <div class="item t_item" @click="linkTo('setAccount')">
                                <div class="icon">
                                    <img src="@/assets/images/user/p3.png" alt="" srcset="" />
                                </div>
                                <div class="txts">账号设置</div>
                            </div>
                            <div class="item" @click="linkTo('inboxNotifications')">
                                <div class="icon">
                                    <img src="@/assets/images/user/inner-msg-icon.png" alt="" srcset="" />
                                </div>
                                <span v-if="msgNum" class="num-tips" style="background-color: #fc9c21">{{ msgNum }}</span>
                                <div class="txts">站内信</div>
                            </div>
                        </div>
                    </div>
                    <div class="itemBox_item">
                        <div class="titles">应聘管理</div>
                        <div class="itemRow">
                            <div class="item" @click="linkTo('deliverRecord')">
                                <div class="icon">
                                    <img src="@/assets/images/user/p5.png" alt="" srcset="" />
                                </div>
                                <div class="txts">投递记录</div>
                            </div>
                            <div class="item" @click="linkTo('invited')">
                                <div class="icon">
                                    <img src="@/assets/images/user/p6.png" alt="" srcset="" />
                                </div>
                                <span v-if="nums1" class="num-tips">{{ nums1 }}</span>
                                <div class="txts">面试邀约</div>
                            </div>
                            <div class="item" @click="linkTo('feedback')">
                                <div class="icon">
                                    <img src="@/assets/images/user/p7.png" alt="" srcset="" />
                                </div>
                                <span v-if="nums2" class="num-tips" style="background-color: #fc9c21">{{ nums2 }}</span>
                                <div class="txts">应聘反馈</div>
                            </div>
                            <div class="item" @click="linkTo('favorites')">
                                <div class="icon">
                                    <img src="@/assets/images/user/favorites.png" alt="" srcset="" />
                                </div>
                                <div class="txts">收藏夹</div>
                            </div>
                            <div class="item" @click="linkTo('viewRecord')">
                                <div class="icon">
                                    <img src="@/assets/images/user/viewRecord.png" alt="" srcset="" />
                                </div>
                                <div class="txts">浏览记录</div>
                            </div>
                        </div>
                    </div>
                    <div class="itemBox_item">
                        <div class="titles">简历管理</div>
                        <div class="itemRow">
                            <div class="item" @click="linkTo('resumeReview')">
                                <div class="icon">
                                    <img src="@/assets/images/user/p4.png" alt="" srcset="" />
                                </div>
                                <div class="txts">我的简历</div>
                            </div>
                            <div class="item" @click="linkTo('aiResume')">
                                <div class="icon">
                                    <img src="@/assets/images/user/aiResume.png" alt="" srcset="" />
                                </div>
                                <div class="txts">AI简历</div>
                            </div>
                        </div>
                    </div>
                    <div class="itemBox_item  hideen-on-mobile">
                        <div class="titles">实践项目管理</div>
                        <div class="itemRow">
                            <div class="item" @click="linkTo('registrationProduct')">
                                <div class="icon">
                                    <img src="@/assets/images/user/p10.png" alt="" srcset="" />
                                </div>
                                <div class="txts">报名项目</div>
                            </div>
                            <div class="item" @click="linkTo('matchManage')">
                                <div class="icon">
                                    <img src="@/assets/images/user/p8.png" alt="" srcset="" />
                                </div>
                                <div class="txts">比赛管理</div>
                            </div>
                            <div class="item" @click="linkTo('productComment')">
                                <div class="icon">
                                    <img src="@/assets/images/user/p9.png" alt="" srcset="" />
                                </div>
                                <div class="txts">项目评价</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footerMenu></footerMenu>
        </div>
    </section>
</template>

<script>
import footerMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header/index.vue";
import { getNums, getNums2, getInnerMsgNum, getOccupationGenerateSignature } from "../../request/api";
import { mapActions, mapState } from "vuex";
import { getAge } from "../../utils/utils";
export default {
    // 组件名称
    name: "userCenter",
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: { HeaderCom, footerMenu },
    // 组件状态值
    data() {
        return {
            userInfo: {},
            nums1: "",
            nums2: "",
            needToEamil: false,
            userStatusType: {
                txt: "未认证，请尽快认证",
                type: "orange",
                isShowRemark: false,
                isShowEmail: false,
            },
            msgNum: null,
        };
    },
    computed: {
        ...mapState(["USER_INFO", "curriculumId", "messageObj", "isChina"]),
    },
    watch: {
        USER_INFO: function (newValue, oldValue) {
            if (newValue.birthday) {
                newValue.age = getAge(newValue.birthday) + "岁"
            }
            this.userInfo = newValue;
            this.needToEamil =
                !this.isChina && newValue.status == 1 && newValue.isRealName == "yes"; //运营端审核通过，邮箱也认证过
            console.log(this.needToEamil);
            this.getUserStatusType(
                newValue.status,
                newValue.isRealName,
                newValue.remark
            );
            // newValue.status == 0
        },
        "messageObj.nums1": {
            handler(newValue, oldValue) {
                this.nums1 = newValue;
            },
        },
        "messageObj.nums2": {
            handler(newValue, oldValue) {
                this.nums2 = newValue;
            },
        },
    },
    // 组件方法
    methods: {
        async getInnerMsgNum() {
            this.innerMsgTimer = setInterval(async () => {
                this.setInterTime += 1;
                if (this.setInterTime >= 60 * 5) {
                    this.setInterTime = 0;
                    clearInterval(this.innerMsgTimer);
                    this.getInnerMsgNum();
                }
            }, 1000);
            const { code, data } = await getInnerMsgNum();
            if (code === 0) {
                this.msgNum = Number(data);
            } else {
                this.msgNum = 0;
            }
        },
        ...mapActions(["FETCH_USER_INFO"]),
        authClick(flag) {
            if (!flag) return;
            this.linkTo("auditId");
        },
        getUserStatusType(status, isRealName, remark) {
            let obj = {
                txt: {
                    0: "未认证，请尽快认证",
                    1: "已认证",
                    2: "审核不通过，请重新提交认证",
                    3: "已提交认证，审核中",
                }[status || "0"],
                type: { 0: "orange", 1: "green", 2: "red", 3: "orange" }[status || "0"],
                isShowRemark: remark && status == "2",
                isShowEmail: false,
            };
            if (!this.isChina) {
                //非国内大陆手机号，走邮箱验证，最终邮箱认证完才算认证通过
                if (status == "1" && isRealName != "yes") {
                    //运营端审核通过，但邮箱未认证完，此时认证流程还未走完
                    obj.txt = "通过审核，请尽快进入邮箱认证";
                    obj.type = "red";
                    obj.isShowEmail = true;
                }
            }
            this.userStatusType = obj;
        },
        isMobile() {
            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
            return /android|iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
        },
        linkTo(routeName) {
            if (routeName === 'aiResume') {
                if (this.isMobile()) {
                    this.$message.warning('请使用电脑端进行操作')
                    return
                }
                if (this.userInfo.status != 1 && this.userInfo.status != 2) {
                    this.$message.warning('请完成认证')
                    this.authClick(this.userInfo.status != 1)
                    return
                }
                getOccupationGenerateSignature({
                    "mobile": this.userInfo.mobile,
                    "studentName": this.userInfo.studentName
                }).then(res => {
                    if (res && res.data) {
                        const { secretId, fromValue } = res.data;
                        if (secretId && fromValue) {
                            window.open(`https://portal.jiuyexing.com/#/login?collegeId=${secretId}&from=${fromValue}&pathName=aiResumeIndex`, '_blank')
                        } else {
                            this.$message.warning('系统异常，请稍后重试～')
                        }
                    }
                })
                return
            }
            if (routeName == "auditId") {
                if (this.userInfo.status == 3) {
                    this.$message.warning("认证中，请等待审核");
                    return;
                }
                if (!this.needToEamil && this.userInfo.status == 1) {
                    this.$message.warning(
                        `身份认证中，请前往邮箱认证：${this.userInfo.email}`
                    );
                    return;
                }
            }
            if (["deliverRecord", "invited", "feedback"].indexOf(routeName) > -1) {
                if (
                    Number(this.userInfo.status) == 1 &&
                    this.userInfo.nickname &&
                    this.userInfo.email &&
                    this.curriculumId
                ) {
                    this.$router.push({ name: routeName });
                } else {
                    this.$message.warning("请先进行身份认证");
                }
            } else {
                this.$router.push({ name: routeName });
            }
        },
        async init() {
            let studentId = localStorage.getItem("userId");
            getNums({ studentId }).then((res) => {
                if (res.data) {
                    this.nums1 = res.data >= 100 ? "99+" : res.data;
                }
            });
            getNums2({ studentId }).then((res) => {
                if (res.data) {
                    this.nums2 = res.data >= 100 ? "99+" : res.data;
                }
            });
        },
    },
    created() {
        this.getInnerMsgNum();
    },
    mounted() {
        this.init();
    },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1000px;

    .content-page {
        position: relative;
        width: 100%;
        height: 100%;
        padding-top: 80px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;

        .bannber {
            position: relative;
            display: block;
            width: 100%;
            height: 170px;
            object-fit: cover;
            margin-bottom: 25px;
        }

        .content {
            position: relative;
            width: 1200px;
            padding: 45px 32px 0;
            margin: 0 auto;
            flex: 1;

            .content-title {
                font-size: 25px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #37383d;
                line-height: 36px;
                margin-bottom: 30px;
            }

            .user-info {
                position: relative;
                height: 134px;
                border-bottom: 1px solid #d4d6da;

                .left-img {
                    display: block;
                    float: left;
                    width: 90px;
                    height: 90px;
                    border-radius: 8px;
                    margin-right: 16px;
                }

                .right {
                    height: 90px;
                    overflow: hidden;
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: space-between;
                    align-items: flex-start;

                    .row1 {
                        line-height: 40px;
                        display: flex;
                        align-items: center;

                        .name {
                            font-size: 25px;
                            font-family: PingFangSC-Semibold, PingFang SC;
                            font-weight: 600;
                            color: #37383d;
                            line-height: 30px;
                        }

                        .auth-status {
                            display: flex;
                            padding: 4px 10px;
                            padding-left: 27px;
                            background: rgba(252, 156, 33, 0.08);
                            border-radius: 4px;
                            border: 1px solid #fc9c21;
                            position: relative;
                            font-size: 15px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #fc9c21;
                            line-height: 21px;
                            margin: 0 12px;

                            img {
                                position: absolute;
                                left: 8px;
                                width: 15px;
                                height: 18px;
                                top: 50%;
                                transform: translateY(-50%);
                            }

                            &.red {
                                background: rgba(254, 78, 61, 0.1);
                                border: 1px solid #fe4e3d;
                                color: #fe4e3d;
                            }

                            &.green {
                                background: rgba(111, 199, 15, 0.09);
                                border: 1px solid #6fc70f;
                                color: #6fc70f;
                            }
                        }

                        .el-icon-warning-outline {
                            font-size: 22px;
                            //   color: #6fc70f;
                            cursor: pointer;
                        }
                    }

                    .row2 {
                        font-size: 15px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #3d6cb0;
                        line-height: 21px;

                        .line {
                            display: inline-block;
                            width: 1px;
                            height: 10px;
                            background-color: #3d6cb0;
                            margin: 0 14px;
                        }
                    }

                    .row3 {
                        position: relative;
                        font-size: 15px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #3d6cb0;
                        line-height: 20px;
                        padding-left: 23px;
                        height: 20px;
                        vertical-align: middle;

                        .phone-icon {
                            position: absolute;
                            top: 0px;
                            display: block;
                            top: 50%;
                            left: 0;
                            transform: translateY(-50%);
                            width: 15px;
                            height: 15px;
                            background: url("../../assets/images/user/phone.png") center center / cover;
                        }
                    }
                }
            }

            .menu-block {
                background: #f9f9f9;
                border-radius: 6px;
                border: 1px solid #f0f0f0;
                margin-top: 20px;
                padding: 20px 30px;
                height: 261px;
                margin-bottom: 50px;

                .title {
                    font-size: 18px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #37383d;
                    line-height: 25px;
                    margin-bottom: 35px;
                }

                .menu-item {
                    position: relative;
                    width: calc(100vw * 80 / 1920);
                    max-width: 80px;
                    cursor: pointer;
                    margin: 0 auto;

                    .icon {
                        width: 56px;
                        height: 56px;
                        display: block;
                        margin: 0 auto 8px;
                    }

                    .name {
                        text-align: center;
                        font-size: 14px;
                    }

                    .num-tips {
                        position: absolute;
                        right: 0;
                        top: 0;
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        // font-weight: 500;
                        color: #ffffff;
                        line-height: 24px;
                        padding: 0 15px;
                        border-radius: 15px;
                        background: #fe4e3d;
                        transform: translate3d(50%, -30%, 0);
                    }

                    .more99 {
                        border: 1px solid #fe4e3d;
                        background: #fe4e3d;
                    }

                    &:hover {
                        .name {
                            color: #2f8efe;
                        }
                    }
                }
            }

            .more-tips {
                width: 60%;
                height: 41px;
                line-height: 41px;
                background: #f9f9f9;
                border-radius: 2px;
                border: 1px solid #f0f0f0;
                font-size: 20px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #b0b0b0;
                text-align: center;
                margin: 50px auto 0;
            }
        }
    }
}

.noSpace {
    .el-row--flex.is-justify-space-between {
        justify-content: left;
    }
}

.itemBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 28px;

    .itemBox_item {
        width: calc((100% - 20px) / 2);
        padding: 20px 20px 25px;
        background: #f9f9f9;
        border-radius: 6px;
        border: 1px solid #f0f0f0;
        margin-bottom: 30px;

        .titles {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383d;
            line-height: 25px;
            margin-bottom: 25px;
        }

        .itemRow {
            display: flex;

            .item {
                margin: 0 25px;
                cursor: pointer;
                position: relative;

                .num-icon {
                    font-size: 12px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    color: #ffffff;
                    line-height: 20px;
                    padding: 0 4px;
                    border-radius: 15px;
                    margin-left: 2px;
                    background: rgb(252, 156, 33);
                }

                .num-tips {
                    position: absolute;
                    right: 0;
                    top: 0;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    // font-weight: 500;
                    color: #ffffff;
                    line-height: 24px;
                    padding: 0 15px;
                    border-radius: 15px;
                    background: #fe4e3d;
                    transform: translate3d(50%, -30%, 0);
                }

                &:first-child {
                    margin-left: 0;
                }

                &:last-child {
                    margin-right: 25px;
                }

                .icon {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    margin-bottom: 8px;

                    img {
                        width: 56px;
                    }
                }

                .txts {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #37383d;
                    line-height: 20px;
                }
            }
        }
    }
}

.hideen-on-mobile {
    display: block;
}

@media screen and (max-width: 750px) {
    #app {
        min-width: auto;
    }

    .hideen-on-mobile {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .page {
        position: relative;
        width: 100%;
        height: 100%;
        min-width: auto;

        .headerCom {
            // display: none;
        }

        .content-page {
            position: relative;
            width: 100%;
            height: 100%;
            padding-top: 0.6rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;

            .bannber {
                position: relative;
                display: none;
                width: 100%;
                height: 1.7rem;
                object-fit: cover;
                margin-bottom: 0.25rem;
            }

            .content {
                position: relative;
                width: 100%;
                padding: 0;
                margin: 0 auto;
                flex: 1;

                .content-title {
                    display: none;
                    font-size: 0.25rem;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #37383d;
                    line-height: 0.36rem;
                    margin-bottom: 0.3rem;
                }

                .user-info {
                    position: relative;
                    height: auto;
                    padding: 0.2rem 0.1rem 0.2rem 0.1rem;
                    border-bottom: 10px solid #fafafa;

                    .left-img {
                        display: block;
                        float: left;
                        width: 0.58rem;
                        height: 0.58rem;
                        border-radius: 0.08rem;
                        margin-right: 0.16rem;
                    }

                    .right {
                        height: auto;
                        overflow: hidden;
                        display: flex;
                        flex-flow: column nowrap;
                        justify-content: space-between;
                        align-items: flex-start;

                        .row1 {
                            line-height: 0.4rem;
                            display: flex;
                            align-items: center;

                            .name {
                                font-size: 0.2rem;
                                font-family: PingFangSC-Semibold, PingFang SC;
                                font-weight: 600;
                                color: #37383d;
                                line-height: 0.3rem;
                            }

                            .auth-status {
                                display: flex;
                                padding: 0.02rem 0.05rem;
                                padding-left: 0.22rem;
                                background: rgba(252, 156, 33, 0.08);
                                border-radius: 0.04rem;
                                border: 0.01rem solid #fc9c21;
                                position: relative;
                                font-size: 0.15rem;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                font-size: 0.1rem;
                                color: #fc9c21;
                                line-height: 0.21rem;
                                margin: 0 0.08rem;

                                img {
                                    position: absolute;
                                    left: 0.09rem;
                                    width: 0.09rem;
                                    height: 0.11rem;
                                    top: 50%;
                                    transform: translateY(-50%);
                                }

                                &.red {
                                    background: rgba(254, 78, 61, 0.1);
                                    border: 1px solid #fe4e3d;
                                    color: #fe4e3d;
                                }

                                &.green {
                                    background: rgba(111, 199, 15, 0.09);
                                    border: 1px solid #6fc70f;
                                    color: #6fc70f;
                                }
                            }

                            .el-icon-warning-outline {
                                font-size: 0.16rem;
                                //   color: #6fc70f;
                                cursor: pointer;
                            }
                        }

                        .row2 {
                            font-size: 0.14rem;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #707D96;
                            line-height: 0.21rem;
                            margin-top: 0.02rem;

                            .line {
                                display: inline-block;
                                width: 1px;
                                height: 10px;
                                background-color: #9CA8BE;
                                margin: 0 0.05rem;
                            }
                        }

                        .row3 {
                            position: relative;
                            font-size: 15px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #707D96;
                            line-height: 0.2rem;
                            padding-left: 0.23rem;
                            margin-top: 0.08rem;
                            height: 0.2rem;
                            vertical-align: middle;

                            .phone-icon {
                                position: absolute;
                                top: 0px;
                                display: block;
                                top: 50%;
                                left: 0;
                                color: #3d6cb0;
                                transform: translateY(-50%);
                                width: 0.16rem;
                                height: 0.16rem;
                                background: url("../../assets/images/user/phone.png") center center / cover;
                            }
                        }
                    }
                }

                .menu-block {
                    background: #f9f9f9;
                    border-radius: 6px;
                    border: 1px solid #f0f0f0;
                    margin-top: 20px;
                    padding: 20px 30px;
                    height: 261px;
                    margin-bottom: 50px;

                    .title {
                        font-size: 18px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #37383d;
                        line-height: 25px;
                        margin-bottom: 35px;
                    }

                    .menu-item {
                        position: relative;
                        width: calc(100vw * 80 / 1920);
                        max-width: 80px;
                        cursor: pointer;
                        margin: 0 auto;

                        .icon {
                            width: 56px;
                            height: 56px;
                            display: block;
                            margin: 0 auto 8px;
                        }

                        .name {
                            text-align: center;
                            font-size: 14px;
                        }

                        .num-tips {
                            position: absolute;
                            right: 0;
                            top: 0;
                            font-size: 14px;
                            font-family: PingFangSC-Medium, PingFang SC;
                            // font-weight: 500;
                            color: #ffffff;
                            line-height: 24px;
                            padding: 0 15px;
                            border-radius: 15px;
                            background: #fe4e3d;
                            transform: translate3d(50%, -30%, 0);
                        }

                        .more99 {
                            border: 1px solid #fe4e3d;
                            background: #fe4e3d;
                        }

                        &:hover {
                            .name {
                                color: #2f8efe;
                            }
                        }
                    }
                }

                .more-tips {
                    width: 60%;
                    height: 41px;
                    line-height: 41px;
                    background: #f9f9f9;
                    border-radius: 2px;
                    border: 1px solid #f0f0f0;
                    font-size: 20px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #b0b0b0;
                    text-align: center;
                    margin: 50px auto 0;
                }
            }
        }
    }

    .noSpace {
        .el-row--flex.is-justify-space-between {
            justify-content: left;
        }
    }

    .itemBox {
        width: 100%;
        display: flex;
        flex-direction: column;
        // flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 0;
        // &.itemBox > *{

        //   }
        .itemBox_item {
            // width: calc((100% - 20px) / 2);
            width: 100%;

            padding: 12px 10px 20px 10px;
            background: #fff;
            border-radius: 6px;
            // border: 1px solid #f0f0f0;
            margin-bottom: 0;
            border: 0;
            border-bottom: 10px solid #fafafa;

            .titles {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: bold;
                color: #37383d;
                line-height: 25px;
                margin-bottom: 0;
            }

            .itemRow {
                display: flex;
                flex-wrap: wrap;

                .item {
                    width: 33%;
                    margin: 0;
                    margin-top: 20px;
                    cursor: pointer;
                    position: relative;

                    &.t_item {
                        display: none;
                    }

                    .num-icon {
                        font-size: 12px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        color: #ffffff;
                        line-height: 20px;
                        padding: 0 4px;
                        border-radius: 15px;
                        margin-left: 2px;
                        background: rgb(252, 156, 33);
                    }

                    .num-tips {
                        position: absolute;
                        right: 0.3rem;
                        top: 0.05rem;
                        font-size: 0.12rem;
                        font-family: PingFangSC-Medium, PingFang SC;
                        color: #ffffff;
                        line-height: 0.19rem;
                        padding: 0 0.1rem;
                        border-radius: 0.15rem;
                        background: #fe4e3d;
                        transform: translate3d(50%, -50%, 0);
                        // position: absolute;
                        // right: 0;
                        // top: 0;
                        // font-size: 14px;
                        // font-family: PingFangSC-Medium, PingFang SC;
                        // // font-weight: 500;
                        // color: #ffffff;
                        // line-height: 24px;
                        // padding: 0 15px;
                        // border-radius: 15px;
                        // background: #fe4e3d;
                        // transform: translate3d(50%, -30%, 0);
                    }

                    &:first-child {
                        // margin-left: 0;
                    }

                    &:last-child {
                        margin-right: 0;
                    }

                    .icon {
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        margin-bottom: 8px;

                        img {
                            width: 40px;
                        }
                    }

                    .txts {
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #37383d;
                        line-height: 20px;
                    }
                }
            }
        }
    }
}</style>
